<template>
  <XtxTabs v-model="activeName" @tabClick="changeTab" v-if="orderStatus.length">
    <XtxTabsPanel v-for="item in orderStatus" :key="item.name" :label="item.label" :name="item.name"></XtxTabsPanel>
  </XtxTabs>
  <!-- 列表 -->
  <div class="order-list">
    <OrderItem
      v-for="item in orderList"
      :key="item.id" :order="item"
      @canel="canel"
      @onDelete="onDelete"
      @receiving="receiving"
      @logisti="logisti"
      />
    <div v-if="loading" class="loading"></div>
    <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
  </div>
  <!-- 分页组件 -->
  <XtxPagination @currentPage="changePage" v-if="orderList.length > 0" :total="total" :currentPage="params.page" :pageSize="params.pageSize"/>
  <OrderCancel ref="orderCanelCom"/>
  <OrderLodistics ref="orderLogistiCom" />
</template>

<script>
import { reactive, ref, watch } from 'vue-demi'
import OrderItem from './components/orderitem.vue'
import { confirmOrder, delteOrder, findOrderList } from '@/api/order'
import OrderCancel from './components/order-cancel.vue'
import confirm from '@/components/library/confirm'
import message from '@/components/library/message'
import OrderLodistics from './components/order-logistics'
export default {
  name: 'MemberOrder',
  components: {
    OrderItem, OrderCancel, OrderLodistics
  },
  setup () {
    // 订单状态
    const orderStatus = [
      { name: 'all', label: '全部订单' },
      { name: 'unpay', label: '待付款' },
      { name: 'deliver', label: '待发货' },
      { name: 'receive', label: '待收货' },
      { name: 'comment', label: '待评价' },
      { name: 'complete', label: '已完成' },
      { name: 'cancel', label: '已取消' }
    ]
    const activeName = ref('all')
    // 获取订单数据
    const params = reactive({
      page: 1,
      pageSize: 10,
      orderState: 0
    })
    const loading = ref(false)
    const orderList = ref([])
    const total = ref(0)
    const getOrderList = () => {
      orderList.value = []
      loading.value = true
      findOrderList(params).then(res => {
        total.value = res.result.counts
        loading.value = false
        orderList.value = res.result.items
      })
    }
    watch(params, () => {
      getOrderList()
    }, { immediate: true })

    const changeTab = ({ name, i }) => {
      params.page = 1
      params.orderState = i
    }
    const changePage = page => {
      orderList.value = []
      params.page = page
    }
    // 删除订单
    const onDelete = (order) => {
      confirm({ text: '您确认删除该订单吗？' }).then(res => {
        delteOrder(order.id).then((res) => {
          message({ type: 'success', text: '删除成功' })
          getOrderList()
        })
      }).catch(() => {})
    }

    return {
      activeName,
      changeTab,
      orderStatus,
      orderList,
      loading,
      total,
      params,
      changePage,
      ...userCanle(),
      ...userConfirm(),
      ...userLogisti(),
      onDelete
    }
  }
}
// 取消订单
export const userCanle = () => {
  const orderCanelCom = ref(null)
  const canel = (order) => {
    orderCanelCom.value.open(order)
  }
  return { canel, orderCanelCom }
}
// 确认收获
export const userConfirm = () => {
  const receiving = (order) => {
    confirm({ text: '您确认收获吗？' }).then(res => {
      confirmOrder(order.id).then(res => {
        message({ type: 'success', text: '确认收货成功' })
        order.orderState = 4
      })
    }).catch(() => {})
  }
  return { receiving }
}
// 查看物流逻辑
const userLogisti = () => {
  const orderLogistiCom = ref(null)
  const logisti = (order) => {
    orderLogistiCom.value.open(order.id)
  }
  return { logisti, orderLogistiCom }
}
</script>

<style scoped lang="less">
  .order-list {
  position: relative;
  background: #fff;
  padding: 20px;
  .loading {
    height: 100%;
    width: 100%;
    min-height: 600px;
    position: absolute;
    left: 0;
    top: 0px;
    background: rgba(255,255,255,.9) url(../../../assets/images/loading.gif) no-repeat center;
}

}

.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}

</style>
